<%--
  Created by IntelliJ IDEA.
  User: kingshion
  Date: 2020/5/19
  Time: 16:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <title>题库管理</title>
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">题库管理</li>
        <li>创建题库</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <h3 style="color: #b2b2b2">题库用于对试题进行分类管理，请在以下列表中管理您的题库</h3>
            <br>
            <table class="layui-hide" id="test" lay-filter="test"></table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

        </div>
        <div class="layui-tab-item">
            <h3 style="color: #b2b2b2">填写下面的表单，创建一个新的题库</h3>
            <br>
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">题库名称：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="course_name" lay-verify="required"
                               placeholder="题库名称" autocomplete="off" style="width:500px">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">题库描述：</label>
                    <div class="layui-input-block">
                        <textarea name="course_desc" style="width:500px" class="layui-textarea"
                                  placeholder="题库描述"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="addCourse"> 立即提交</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>


<script>

    layui.use(['layer', 'table', 'element', 'form'], function () {
        var layer = layui.layer,
            table = layui.table,
            $ = layui.jquery,
            form = layui.form,
            element = layui.element;

        table.render({
            elem: '#test',
            url: '/OnlineExam/admin/course?m=show',
            cols: [[{
                type: 'checkbox',
                fixed: 'left'
            }, {
                field: 'course_id',
                width: '20%',
                title: 'ID',
                sort: true
            }, {
                field: 'course_name',
                width: '29%',
                title: '科目名称'
            }, {
                field: 'course_desc',
                width: '30%',
                title: '描述',
            }, {
                fixed: 'right',
                title: '操作',
                toolbar: '#barDemo',
                width: '20%'
            }]],
            page: true
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var course_id = obj.data.course_id;
            var course_name = obj.data.course_name;
            var course_desc = obj.data.course_desc;

            console.log(course_id)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么？', function (index) {
                    obj.del();
                    $.ajax({
                        url: "/OnlineExam/admin/course?m=del",
                        data: "id=" + course_id,
                        success: function (result) {
                            layer.msg('删除成功！');
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                        type: 2,
                        title: ['修改科目', 'font-size:18px;'],
                        content: './coursePages/modifyCourse.jsp',
                        area: ['630px', '300px'],
                        success: function (layero, index) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

                            body.find('input').val(course_name);
                            body.find('textarea').val(course_desc);
                            body.find('button').click(function (event) {
                                var id = course_id;
                                var name = body.find('input').val();
                                var desc = body.find('textarea').val();
                                $.ajax({
                                    url: "/OnlineExam/admin/course?m=update",
                                    data: "id=" + id + "&name=" + name + "&desc=" + desc,
                                    success: function (result) {
                                        layer.msg("修改成功！");
                                        layer.close(index);
                                        history.go(0);
                                        return true;
                                    }
                                })
                            });
                        }
                    }
                )
            }
        });

        /**
         * 添加课程按钮事件
         */
        form.on('submit(addCourse)', function (data) {
            var name = data.field.course_name;
            var desc = data.field.course_desc;

            $.ajax({
                url: "/OnlineExam/admin/course?m=add",
                data: "name=" + name + "&desc=" + desc,
                success: function (result) {
                    layer.msg("添加成功");
                }
            });
            return true;
        })

    })
</script>

</body>
</html>
